<template>
  <div class="index">
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search">
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <div class="user">
        <van-icon name="manager-o" @click="jump"/>
      </div>
    </div>
    <!-- 添加标签页 -->
    <van-tabs v-model="active" swipeable sticky>
      <van-tab :title="value.name" v-for="(value) in cateList" :key="value.id">
        <van-list
          v-model="value.loading"
          :finished="value.finished"
          loading-text="玩命加载中..."
          finished-text="没有更多了"
          @load="loadMore"
          :immediate-check="false"
          :offset="10"
        >
          <van-pull-refresh v-model="value.isLoading" @refresh="onRefresh">
            <articleblock v-for="(v) in value.postlist" :key="v.id" :post="v"></articleblock>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCateList } from "@/apis/cate.js";
import { getPostList } from "@/apis/articles.js";
import articleblock from "@/components/articleBlock.vue";
export default {
  components: {
    articleblock,
  },
  data() {
    return {
      // 无论用户是否登陆，都应该让头条栏目默认被选中，所以要根据用户的登陆状态进行索引的设置
      active: localStorage.getItem("hm_toutiao_52") ? 1 : 0,
      cateList: [], // 栏目列表数据
    };
  },
  // 1.侦听器中的方法的名称必须和你想侦听的属性名称完全一致
  // 2.侦听器中一般不会有返回值
  // 3.侦听不能人为调用
  watch: {
    // 这个Active在单击切换和滑动切换都会变化，所以我们只需要监听这个值的变化
    async active() {
      // console.log("当前的栏目id是：", this.cateList[this.active].id);
      // // 加载这个栏目的文章数据
      // 我们得判断下当前的切换是否是第一次切换，如果是才去进行数据的获取，否则不获取
      if (this.cateList[this.active].postlist.length == 0) {
        this.init();
      }
    },
  },
  methods: {
    // 跳转到个人中心
    jump(){
      let userid = JSON.parse(localStorage.getItem('toutiao_userinfo_52') || '{}').id
      console.log(userid)
      this.$router.push({path:'/personal/'+userid})
    },
    // 下拉刷新
    onRefresh(){
      // 回到第一页
      this.cateList[this.active].pageIndex = 1
      // 清空当前栏目的文章列表数据,不然数据会重复
      this.cateList[this.active].postlist.length = 0
      // 重新 发起请求获取数据
      setTimeout(async () => {
        let posts = await getPostList({
          category: this.cateList[this.active].id,
          pageIndex: this.cateList[this.active].pageIndex,
          pageSize: this.cateList[this.active].pageSize,
        });
        // 将获取的数据存储到当前栏目的postlist数组中--追加
        this.cateList[this.active].postlist.push(...posts.data.data);
        // // 将isloading重置为False:本次操作完毕,重置 
        this.cateList[this.active].isLoading = false
        // // 将finished重置为False,否则不能再进行上拉加载
        this.cateList[this.active].finished = false
      }, 2000);
    },
    // 加载更多数据
    loadMore() {
      console.log(123);
      // 下面是为了看到效果，故意添加的延迟，以后真正开发的时候不用这样处理
      setTimeout(async () => {
        this.cateList[this.active].pageIndex++;
        let posts = await getPostList({
          category: this.cateList[this.active].id,
          pageIndex: this.cateList[this.active].pageIndex,
          pageSize: this.cateList[this.active].pageSize,
        });
        // 将获取的数据存储到当前栏目的postlist数组中--追加
        this.cateList[this.active].postlist.push(...posts.data.data);
        // 本次请求完毕，将loading重置为false,以便让用户可以继续加载下一页数据，否则“正在加载中..."不会消失，无法加载下一页了
        this.cateList[this.active].loading = false;
        // // 经过本次请求之后，如果所有数据都加载完毕了则需要将finished重置为true,标记所有数据加载完毕，后续请求不再响应
        if (posts.data.data.length < this.cateList[this.active].pageSize) {
          this.cateList[this.active].finished = true;
        }
      }, 2000);
    },
    // 获取当前栏目的文章数据
    async init() {
      // 加载这个栏目的文章数据
      let posts = await getPostList({
        category: this.cateList[this.active].id, // 拿到这个栏目的id
        pageIndex: 1,
        pageSize: 5,
      });
      console.log(posts);
      // 将获取的数据存储到当前栏目的postlist数组中
      this.cateList[this.active].postlist = posts.data.data;
      // console.log(this.cateList);
    },
  },
  async mounted() {
    // 加载栏目数据:id is_top name
    let res = await getCateList();
    // console.log(res);
    this.cateList = res.data.data;
    // 改造数据成为符合我们业务需求的格式，简单说就是为数据添加新的成员
    // 1.每个栏目的属于自己的文章数据
    // 2.每个栏目有属于自己的分页操作数据
    // 3.每个栏目有属于自己的下拉刷新的标记
    // 4.每个栏目有属于自己的上拉加载更多数据的标记
    this.cateList = this.cateList.map((value) => {
      return {
        ...value,
        postlist: [], // 添加一个成员用于存储当前栏目的文章数据
        pageIndex: 1,
        pageSize: 5,
        loading: false, // 这个栏目的加载状态,如果为true，则在响应成功之后不再重复响应用户的请求
        finished: false, // 这个栏目的数据是否完全加载完毕，如果为true,会显示没有更多数据了...
        isLoading: false, // 标记是否正在进行下拉刷新
      };
    });
    // console.log(this.cateList);
    // 加载当前栏目的文章数据
    this.init();
  },
};
</script>

<style lang="less" scoped>
.index {
  .header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: #f00;
    align-items: center;
    color: #fff;
  }
  .search {
    flex: 1;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    .van-icon {
      font-size: 16px;
    }
  }
  .van-icon {
    font-size: 24px;
    padding: 0 10px;
  }
  .iconfont {
    font-size: 50px;
    padding: 0 10px;
  }
}
</style>